<template>
    <view>
        <!-- index.wxml -->
        <navigation-bar title="Weixin" :back="false" color="black" background="#FFF"></navigation-bar>
        <scroll-view class="scrollarea" scroll-y type="list">
            <view class="container">
                <view class="userinfo">
                    <block v-if="canIUseNicknameComp && !hasUserInfo">
                        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                            <image class="avatar" :src="userInfo.avatarUrl"></image>
                        </button>
                        <view class="nickname-wrapper">
                            <text class="nickname-label">昵称</text>
                            <input type="nickname" class="nickname-input" placeholder="请输入昵称" @change="onInputChange" />
                        </view>
                    </block>
                    <block v-else-if="!hasUserInfo">
                        <button v-if="canIUseGetUserProfile" @tap="getUserProfile">获取头像昵称</button>
                        <view v-else>请使用2.10.4及以上版本基础库</view>
                    </block>
                    <block v-else>
                        <image @tap="bindViewTap" class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
                        <text class="userinfo-nickname">{{ userInfo.nickName }}</text>
                    </block>
                </view>
                <view class="usermotto">
                    <text class="user-motto">{{ motto }}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import navigationBar from '@/components/navigation-bar/navigation-bar';
// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
export default {
    components: {
        navigationBar
    },
    data() {
        return {
            motto: 'Hello World',
            userInfo: {
                avatarUrl: defaultAvatarUrl,
                nickName: ''
            },
            hasUserInfo: false,
            canIUseGetUserProfile: uni.canIUse('getUserProfile'),
            canIUseNicknameComp: uni.canIUse('input.type.nickname')
        };
    },
    methods: {
        // 事件处理函数
        bindViewTap() {
            uni.navigateTo({
                url: '../logs/logs'
            });
        },
        onChooseAvatar(e) {
            const { avatarUrl } = e.detail;
            const { nickName } = this.userInfo;
            this.setData({
                'userInfo.avatarUrl': avatarUrl,
                hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl
            });
        },
        onInputChange(e) {
            const nickName = e.detail.value;
            const { avatarUrl } = this.userInfo;
            this.setData({
                'userInfo.nickName': nickName,
                hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl
            });
        },
        getUserProfile(e) {
            // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
            uni.getUserProfile({
                desc: '展示用户信息',
                // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
                success: (res) => {
                    console.log(res);
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true
                    });
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
/**index.wxss**/
page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.scrollarea {
    flex: 1;
    overflow-y: hidden;
}

.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    width: 80%;
}

.userinfo-avatar {
    overflow: hidden;
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}

.usermotto {
    margin-top: 200px;
}

.avatar-wrapper {
    padding: 0;
    width: 56px !important;
    border-radius: 8px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.avatar {
    display: block;
    width: 56px;
    height: 56px;
}

.nickname-wrapper {
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    color: black;
}

.nickname-label {
    width: 105px;
}

.nickname-input {
    flex: 1;
}
</style>
